<template>
	<view>
		<view class="page">
		<view class="top" :style="`padding-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="top-icon"   @click="back">
				<u-icon name="arrow-left" size="42rpx" color='#fff'></u-icon>
			</view>
			<view class="top-title c-fff" >{{title}}</view>
		</view>
		<view class="body" :style="`margin-top:`+$store.state.StatusBar.statusBar + `px`">
			<view class="list">
				<view class="flex_r fa_c item" :class="selectId == item.id ? 'on' : ''" @click="selectChange(item)" v-for="(item,index) in info.list">
					<image class="image" src="./img/ic_diamond.png"></image>
					<view style="position:absolute; top:20px; left:160rpx;" class="c-fff">{{item.diamonds}}</view>
					<view style="position:absolute; top:50px; left:160rpx; color: #fff; font-size:20rpx;">送{{item.give}}钻石</view>
					<view class="time c-fff">￥{{item.money}}</view>
				</view>
			</view>
		</view>
		<view class="buy" @click="open">立即购买</view>
		<uni-popup ref="popup" type="center">
			<m-pay :money="item.money" :projectId="selectId" :type="1"></m-pay>
		</uni-popup>
		</view>
	</view>
</template>

<script>
	import {to} from '@/utils/index.js';
	export default {
		data() {
			return {
				selectId: 0,
				item: {money:0},
				title: '',
				info: {}
			}
		},
		onLoad(option) {
		},
		onShow(option){
			this.getInfo();
			this.title = '钻石充值'
		},
		methods: {
			to,
			back(){
				to()
			},
			open(){
				if(this.selectId <= 0){
					uni.showToast({
						title: "请选择充值金额",
						icon: "none"
					})
					return;
				}
				this.$refs.popup.open()
			},
			selectChange(item){
				this.selectId = item.id;
				this.item = item;
			},
			async getInfo(){
				let res = await this.$c.post("/app/chongzhi/getRechargeAmountList")
				if(res.code != 0){
					uni.navigateTo({
					  url: '/im/login/login'
					});
				}
				this.info = res.data;
				console.log(res.data)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		/* background: linear-gradient(#e3ecfb, #fdedf0, #fff, #fff); */
	}
	.top {
		position: fixed;
		top: 0rpx;
		width: 100%;
		/* background-color: #e3ecfb; */
		z-index: 999;
		text-align: center;
		vertical-align: middle;
		padding:10rpx;
	}
	.top-icon {
		position: absolute;
		left: 30rpx;
		z-index: 99;
		width: 30rpx;
		height: 30rpx;
	}
	.top-title {
		line-height: 50rpx;
		display: block;
		height:50rpx;
		z-index: 99;
	}
	.body{
		padding-top:40rpx;
	}
	.list{
		padding:20rpx;
		padding-left:2%;
		padding-right:2%;
	}
	.on {
		border:1px solid #c60000;
	}
	.buy{
		padding:20rpx;
		background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);

		/* background-color: #c60000; */
		color:#fff;
		border-radius: 50rpx;
		text-align: center;
		position: absolute;
		width:80%;
		transform: translateX(-20rpx);
		left:10%;
		bottom:20rpx;
	}
	.item {
		width: 90vw ;
		height: 120rpx;
		/* background-color: #e3ecfb; */
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		position: relative;
		margin-top:20rpx;
		padding:20rpx;
		.image {
			width: 120rpx;
			height: 120rpx;
		}
		.time{
			position: absolute;
			right: 10%;
			font-size:22rpx;
			/* color: #4c4c4c; */
		}
		.title{
			margin-top:20rpx;
			font-size: 28rpx;
		}
		.bottom{
			margin-top:20rpx;
			font-size: 24rpx;
			padding-top:20rpx;
			border-top:1px solid #bdbdbd;
		}

		.item-infr {
			.item-infr-top {}

			.item-infr-top-img {
				width: 40rpx;
				height: 40rpx;
				overflow: hidden;
				border-radius: 50%;
				margin-left: 20rpx;
			}
		}

		.item-button {
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 25rpx;
			background-color: #e8e1e8;
		}
		.item-button_{
			box-sizing: border-box;
			padding: 0 20rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			border-radius: 50rpx;
			background: linear-gradient(180deg, #FDB175 5%, #F49C66 100%);
			/* background-image: linear-gradient(to right,rgba(230, 22, 106, 0.3),#e6166a); */
			.item-button_icon{
				width: 30rpx;
				height: 30rpx;
				margin-right: 6rpx;
			}
		}
		
	}
</style>